<!--
  角色列表组件 - 显示角色数据表格
  @usage 在角色管理页面中使用
  @path /components/system/role/RoleList.vue
  @related views/system/role/Index.vue
-->
<template>
  <div :class="['role-list-container', props.displayMode + '-mode']">
    <!-- 表格工具栏 -->
    <div class="table-toolbar">
      <div class="toolbar-left">
        <el-button type="primary" @click="handleAddRole">
          <el-icon>
            <Plus />
          </el-icon>
          新增角色
        </el-button>
        <el-button @click="handleRefresh">
          <el-icon>
            <Refresh />
          </el-icon>
          刷新
        </el-button>
      </div>
      <div class="toolbar-right">
        <el-input v-model="searchKeyword" placeholder="请输入角色名称或编码搜索" prefix-icon="el-icon-search" clearable
          @keyup.enter="handleSearch" style="width: 280px" />
        <el-button @click="handleSearch">搜索</el-button>
      </div>
    </div>

    <!-- 表格内容 -->
    <el-table :data="roleData.list" style="width: 100%" :loading="loading" :border="true" :stripe="true"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column prop="id" label="角色ID" width="80" align="center" />

      <el-table-column prop="roleName" label="角色名称" width="180">
        <template #default="scope">
          <div class="role-name-cell">
            <span>{{ scope.row.roleName }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="roleCode" label="角色编码" width="180" />

      <el-table-column prop="description" label="角色描述" min-width="200" />

      <el-table-column prop="status" label="状态" width="100" align="center">
        <template #default="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
            @change="handleStatusChange(scope.row)" />
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" width="180" />

      <el-table-column prop="updateTime" label="更新时间" width="180" />

      <el-table-column label="操作" width="280" fixed="right" align="center">
        <template #default="scope">
          <el-button-group class="ml-4">
            <el-button type="primary" :icon="Edit" size="small" @click="handleEditRole(scope.row)">编辑</el-button>
            <el-dropdown @command="(command) => handleMoreAction(command, scope.row)">
              <el-button type="info" :icon="MoreFilled" size="small">
                更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="view-users" :icon="User">
                    查看用户
                  </el-dropdown-item>
                  <el-dropdown-item command="view-permissions" :icon="Lock">
                    查看权限
                  </el-dropdown-item>
                  <el-dropdown-item command="toggle-status" :icon="Switch">
                    {{ scope.row.status === 1 ? '禁用' : '启用' }}
                  </el-dropdown-item>
                  <el-dropdown-item command="delete" :icon="Delete" divided>
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination v-model:current-page="roleData.pagination.current" v-model:page-size="roleData.pagination.pageSize"
        :background="true" size="small" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"  :total="roleData.pagination.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange"> 
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Plus, Refresh, Edit, Delete, MoreFilled, User, Lock, Switch, ArrowDown } from '@element-plus/icons-vue'

// 组件属性定义
const props = defineProps({
  // 显示模式：dialog/tabs
  displayMode: {
    type: String,
    default: 'dialog',
    validator: (value) => ['dialog', 'tabs'].includes(value)
  },
  // 角色数据
  roleData: {
    type: Object,
    required: true,
    default: () => ({
      list: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    })
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  }
})

// 组件事件定义
const emit = defineEmits([
  'add-role',
  'edit-role',
  'toggle-status',
  'delete-role',
  'refresh',
  'search',
  'size-change',
  'current-change',
  'view-users',
  'view-permissions'
])

// 响应式变量声明
const searchKeyword = ref('')
const selectedRows = ref([])

// 响应函数声明
/**
 * 处理新增角色
 */
const handleAddRole = () => {
  emit('add-role')
}

/**
 * 处理编辑角色
 */
const handleEditRole = (row) => {
  emit('edit-role', row)
}

/**
 * 处理状态变更
 */
const handleStatusChange = (row) => {
  emit('toggle-status', row)
}

/**
 * 处理删除角色
 */
const handleDeleteRole = (row) => {
  emit('delete-role', row)
}

/**
 * 处理刷新
 */
const handleRefresh = () => {
  // 清空搜索关键词
  searchKeyword.value = ''
  emit('refresh')
}

/**
 * 处理搜索
 */
const handleSearch = () => {
  emit('search', searchKeyword.value)
}

/**
 * 处理更多操作
 */
const handleMoreAction = (command, row) => {
  switch (command) {
    case 'view-users':
      emit('view-users', row)
      break
    case 'view-permissions':
      emit('view-permissions', row)
      break
    case 'toggle-status':
      emit('toggle-status', row)
      break
    case 'delete':
      emit('delete-role', row)
      break
    default:
      ElMessage.info('功能开发中...')
  }
}

/**
 * 处理分页大小变更
 */
const handleSizeChange = (size) => {
  emit('size-change', size)
}

/**
 * 处理当前页变更
 */
const handleCurrentChange = (current) => {
  emit('current-change', current)
}

/**
 * 处理选择变更
 */
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 生命周期钩子
onMounted(() => {
  console.log('角色列表组件已挂载')
})
</script>

<style lang="less" scoped>
.role-list-container {
  // 角色列表容器样式
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  overflow: hidden;

  // tabs模式下的样式调整
  &.tabs-mode {
    border-radius: 0;
    box-shadow: none;

    .table-toolbar {
      padding: 16px;
      background-color: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
    }

    .pagination-container {
      padding: 16px;
      background-color: #f8f9fa;
      border-top: 1px solid #e9ecef;
      justify-content: center;
    }
  }

  // dialog模式下的样式（保持原有样式）
  &.dialog-mode {
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

    .table-toolbar {
      padding: 14px 20px;
      background-color: #fafafa;
      border-bottom: 1px solid #e8e8e8;
    }

    .pagination-container {
      padding: 6px 10px;
      background-color: #fafafa;
      border-top: 1px solid #e8e8e8;
      justify-content: flex-end;
    }
  }

  // 表格工具栏样式
  .table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .toolbar-left,
    .toolbar-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }

  // 表格样式
  .el-table {
    flex: 1;
    width: 100%;
    overflow: hidden;

    &::before {
      display: none;
    }

    .el-table__header-wrapper,
    .el-table__body-wrapper {
      overflow-x: hidden;
    }

    .role-name-cell {
      font-weight: 500;
    }
  }

  // 分页容器样式
  .pagination-container {
    display: flex;

    .el-pagination {
      margin: 0;
    }
  }
}
</style>